<script lang="ts" setup>
import Login from "@/utils/login";
import mheader from "@/components/header.vue";
import FootMenu from "@/components/FootMenu.vue";
import { Ref, onMounted, ref, watch, computed } from "vue";
import { storeToRefs } from "pinia";
import navTo from "@/utils/navTo";
import i18n from "@/i18n";
import moment from "moment";
import noData from "@/components/noData.vue";
import {
  gameList,
  czRechargeGetChargeWallet,
  meMyPlayList,
  tcPlayerRankList,
  launchGame,
  publicBannerList,
  publicNoticeList,
} from "@/api/games";
import { getItem } from "@/utils/utils";
const active = ref("SORE");
const gameListData = ref([]);
const myPlay = ref([]);
const rankList = ref([]);
const currentType = ref("rng_fish");
const loading = ref(false);
const userInfo = ref(
  getItem("userInfo") ? JSON.parse(getItem("userInfo")) : null
);
const title1 = computed(() => i18n.global.t("HomeT3"));
const title2 = computed(() => i18n.global.t("HomeT4"));
const images = ref([]);
const notices = ref("");
window.scrollTo(0, 0);

const getBanner = async () => {
  const res = await publicBannerList({ page: 1, rows: 100 });
  console.log("publicBannerList", res.value);
  images.value =
    res.value.data.total == 0
      ? [
          { url: "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" },
          { uri: "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" },
        ]
      : res.value.data.rows;
};

const getNotice = async () => {
  const res = await publicNoticeList({ page: 1, rows: 100 });
  console.log("publicNoticeList", res.value);
  notices.value =
    res.value.data.rows.length == 0
      ? "Splay 是全球加密货币博彩领域的领导者，是比特币和其他加密货币的最佳赌场和体育投注平台之一。"
      : res.value.data.rows[0].content;
};

const getGameList = async () => {
  try {
    let res = await gameList({
      product_type: 4,
      platform: "html5",
      client_type: "html5",
      game_type: "FISH",
      page: 1,
      page_size: 3,
      language: i18n.global.locale == "zh" ? "CN" : "EN",
    });
    console.log("gamelist:", res.value);
    res.value.data.games.forEach((item: any) => {
      item.icon =
        "https://images.b51613.com:42666/TCG_GAME_ICONS/AG/" +
        item.tcgGameCode +
        ".png";
    });
    gameListData.value = res.value.data.games || [];
  } catch (error) {}
};

const getMyplay = async () => {
  if (!userInfo.value) {
    return;
  }
  try {
    loading.value = true;
    let res = await meMyPlayList({
      gameType: currentType.value,
    });
    res.value.data.rows.forEach((item: any) => {
      item.icon =
        "https://images.b51613.com:42666/TCG_GAME_ICONS/AG/" +
        item.gameCode +
        ".png";
    });
    myPlay.value = res.value.data.rows || [];
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

const getRankList = async () => {
  try {
    loading.value = true;
    let res = await tcPlayerRankList({
      top_num: 10,
      product_type: 4,
    });
    rankList.value = res.value.data || [];
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

const changeTabs = (tab: any) => {
  if (tab == currentType.valye) return;
  myPlay.value = [];
  currentType.value = tab;
  getMyplay();
};

watch(active, () => {
  console.log("都是", active.value);
  myPlay.value = [];
  myPlay.value = [];
  if (active.value == "SORE") {
    getRankList();
  } else {
    getMyplay();
  }
});

const openGame = async (game: any) => {
  console.log("game is", game);
  if (!userInfo) return;
  let res = await launchGame({
    username: userInfo.username,
    product_type: 4,
    game_code: game.tcgGameCode,
    game_mode: "1",
    language: "CN",
    platform: "html5",
  });
  console.log("launchGame-res", res.value.data.game_url);
  window.open(res.value.data.game_url);
};

onMounted(() => {
  getGameList();
  getMyplay();
  getRankList();
  getBanner();
  getNotice();
});
</script>

<template>
  <div class="me-page">
    <div>
      <mheader />
      <div class="bomMain">
        <!-- <van-skeleton title :row="5" /> -->
        <van-notice-bar
          color="#fff"
          style="background: transparent"
          left-icon="volume-o"
          :text="notices"
        />
        <div>
          <van-swipe
            v-if="images.length > 0"
            style="margin-top: 10px"
            :autoplay="2000"
            lazy-render
          >
            <van-swipe-item v-for="image in images" :key="image">
              <img class="imgsss" :src="image.url" />
            </van-swipe-item>
          </van-swipe>
          <van-skeleton v-else title :row="5" />
        </div>
        <div class="box1">
          <div class="box1Title flex items-center">
            {{ i18n.global.t("HomeT1") }}
            <div style="flex: 1" />
            <div class="more" @click="navTo('/games')">
              {{ i18n.global.t("HomeT2") }}
            </div>
          </div>
          <van-grid class="grid" :border="false" :gutter="6" column-num="3">
            <van-grid-item
              class="item"
              style="margin: 10px 0"
              v-for="(item, index) in gameListData"
              :key="index"
            >
              <div @click="openGame(item)">
                <img class="img" :src="item.icon" />
                <div class="name">{{ item.gameName }}</div>
              </div>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="box1 t30">
          <div class="box1Title flex items-center">
            <van-tabs
              title-active-color="#fff"
              title-inactive-color="#999"
              v-model:active="active"
              shrink
            >
              <van-tab :title="title1" name="SORE"></van-tab>
              <van-tab :title="title2" name="MINE"> </van-tab>
            </van-tabs>
            <div style="flex: 1" />
            <div v-if="active == 'MINE'" class="more" @click="navTo('/mybet')">
              {{ i18n.global.t("HomeT2") }}
            </div>
          </div>
          <div class="h30" />
          <div v-if="active == 'SORE'">
            <van-skeleton v-if="loading" title :row="5" />
            <noData v-if="!loading && rankList.length == 0">
              <template #desc>{{ i18n.global.t("ZWSJ") }}</template></noData
            >
            <div
              v-else
              v-for="(item, index) in rankList"
              :key="index"
              class="cell"
            >
              {{ i18n.global.t("HomeT5") }}：{{ item.username }}
              <div style="flex: 1" />
              {{ i18n.global.t("HomeT6") }}：{{ item.totalBetAmount }} USDT
            </div>
          </div>
          <div v-if="active == 'MINE'">
            <div class="tabs">
              <div
                @click="changeTabs('rng_fish')"
                :class="
                  currentType == 'rng_fish' ? 'tab tabsel' : 'tab tabnorsel'
                "
              >
                {{ i18n.global.t("GameT1") }} & {{ i18n.global.t("GameT2") }}
              </div>
              <div
                @click="changeTabs('live')"
                :class="
                  currentType == 'live' ? 'tab tabsel l20' : 'tab tabnorsel l20'
                "
              >
                {{ i18n.global.t("GameT3") }}
              </div>
            </div>
            <noData v-if="!loading && myPlay.length == 0">
              <template #desc>{{ i18n.global.t("ZWSJ") }}</template></noData
            >
            <van-skeleton v-if="loading" title :row="5" />
            <div v-if="myPlay.length > 0 && !loading">
              <div
                v-for="(item, index) in myPlay"
                :key="index"
                :class="index % 2 == 0 ? 'cell color1' : 'cell'"
              >
                <img class="img" :src="item.icon" />
                <div class="info">
                  <div class="topItem">
                    {{ i18n.global.t("HomeT7") }}：{{ item.gameCategory }}
                    <div style="flex: 1" />
                    {{ moment(item.betTime).format("YYYY-MM-DD HH:mm:ss") }}
                  </div>
                  <div class="top6">
                    {{ i18n.global.t("HomeT8") }}：{{ item.betAmount }} USDT
                  </div>
                  <div class="top6">
                    {{
                      Number(item.netPnl) > 0
                        ? i18n.global.t("HomeT9")
                        : i18n.global.t("HomeT10")
                    }}：{{ Math.abs(item.netPnl) }}
                    USDT
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <FootMenu :value="'home'" />
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/style/constant.scss";

.me-page {
  min-height: 100vh;
  margin: 0 auto;
  width: 750 * $_ru;
  flex-direction: column;
  background: #1a2c38;
  .bomMain {
    flex: 1;
    margin: 30 * $_ru 20 * $_ru 120 * $_ru 20 * $_ru;
    padding-bottom: 140 * $_ru;
    .imgsss {
      width: 100%;
      height: 300 * $_ru;
    }
    .t30 {
      margin-top: 20 * $_ru;
    }
    .box1 {
      padding: 20 * $_ru;
      background: #0f212e;
      border-radius: 12 * $_ru;
      margin-top: 20 * $_ru;
      .grid {
        margin-top: 6 * $_ru;
        .item {
          align-items: flex-start;
          justify-content: flex-start;
        }
      }
      .img {
        width: 100%;
      }
      .name {
        font-size: 24 * $_ru;
        color: #fff;
        margin: 10 * $_ru 0;
        text-align: center;
        font-weight: bold;
      }
      .h30 {
        height: 30 * $_ru;
      }
      .box1Title {
        font-family: PingFang SC;
        font-size: 28 * $_ru;
        font-weight: 500;
        color: #fff;
        .more {
          font-size: 24 * $_ru;
          color: #b1bad3;
        }

        > img {
          width: 40 * $_ru;
          height: 40 * $_ru;
          margin-left: 8 * $_ru;
        }
      }
      .tabs {
        display: flex;
        align-items: center;
        .l20 {
          margin-left: 20 * $_ru;
        }
        .tabsel {
          color: #fff;
        }
        .tabnorsel {
          color: #999;
        }
        .tab {
          padding: 15 * $_ru 40 * $_ru;
          border-radius: 40 * $_ru;
          font-family: PingFang SC;
          font-size: 24 * $_ru;
          font-weight: 600;
          background: #1a2c38;
        }
      }
      .cell {
        display: flex;
        flex-direction: row;
        // align-items: center;
        padding: 20 * $_ru 10 * $_ru;
        font-size: 24 * $_ru;
        color: #fff;
        font-weight: 400;
        border-radius: 4 * $_ru;
        .info {
          display: flex;
          flex: 1;
          flex-direction: column;
          margin-left: 20 * $_ru;
          .top6 {
            margin-top: 6 * $_ru;
          }
          .topItem {
            display: flex;
            align-items: center;
          }
        }
        .img {
          width: 120 * $_ru;
          border-radius: 6 * $_ru;
        }
      }
      .account {
        margin-top: 40 * $_ru;

        .accountL {
          .accountLt {
            > img {
              width: 48 * $_ru;
              height: 48 * $_ru;
              margin-right: 16 * $_ru;
            }

            font-family: Mont;
            font-size: 40 * $_ru;
            font-weight: 700;
            color: #fff;

            > div {
              > span {
                font-family: Mont;
                font-size: 28 * $_ru;
                font-weight: 600;
                color: #fff;
                margin-left: 8 * $_ru;
              }
            }
          }
        }
        .right20 {
          margin-right: 20 * $_ru;
        }
        .accountR {
          padding: 15 * $_ru 40 * $_ru;
          border-radius: 40 * $_ru;
          background: #1a2c38;
          font-family: PingFang SC;
          font-size: 24 * $_ru;
          color: #fff;
          font-weight: 600;
        }
      }
    }
  }
}
</style>
